<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <style>
        .layui-container {
            width: 650px !important;
        }
        .h1txt{
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="<c:url value="/static/layui/css/layui.css"/>">
    <script src="<c:url value="/static/layui/layui.js"/>"></script>

    <script>
        window.onload = function (){
            console.log("先加载")
        }
    </script>

</head>
<body>
<br/>
<br/>
<br/>
<%
    System.out.println("LocalAddr = " + request.getLocalAddr());
    System.out.println("RemoteHost = " + request.getRemoteHost());
    System.out.println("RemoteAddr = " + request.getRemoteAddr());
    System.out.println("RemoteUser = " + request.getRemoteUser());
    System.out.println("RemotePort = " + request.getRemotePort());
%>
<hr>
<div class="layui-container">
    <div class="layui-row">
        <form class="layui-form" action="Login" method="post">
            <h1 class="h1txt"><%= "Hello Login!" %></h1>
            <br>
            <br>
            <br>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="user" placeholder="请输入账号" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" placeholder="请输入密码" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <input type="text" name="user" placeholder="请输入验证码" lay-verify="required" autocomplete="off" class="layui-input">
                    <a href="javascript:changeCode()"><img src="VCode" alt="验证码"></a>
                    <c:if test="${sessionScope.login != null}">
                        <p style="color: red">验证码错误</p>
                    </c:if>
                    <p>看不清?点击图片换一张!</p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作">
                    <input type="checkbox" name="like[read]" title="阅读">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="0" title="男">
                    <input type="radio" name="sex" value="1" title="女" checked>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即登录</button>
                    <a href="register.jsp" class="layui-btn layui-btn-danger">没账号?去注册</a>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <script>
                        function changeCode() {
                            let time = new Date().getTime();
                            let getImg = document.getElementById("img");
                            getImg.onclick = function () {
                                getImg.src = "VCode?time=" + time;
                            }
                        }
                    </script>
                </div>
            </div>
            <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </form>
    </div>
</div>

<script>


    function addOption() {//弹出一个表单
        //页面层
        layer.open({
            type: 1,
            skin: 'optionCss',//自定义表单css样式
            area: ['400px', '250px'], //宽高
            content: $("#option3") //调到要弹出的表单
        });
    }

    layui.use(['layer', 'form'], function () {
        var layer = layui.layer;
        var form = layui.form
    });

</script>



</body>
</html>